<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>文件服务器</title>
    <style>
        /* 基本的样式设置 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        /* 标题样式 */
        h3 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        /* 文件输入字段包裹元素的样式 */
        .file-input-wrapper {
            border: 1px solid #ccc; /* 实线边框 */
            padding: 5px; /* 内边距 */
            display: inline-block; /* 使包裹元素与按钮在同一行，如果需要的话 */
            margin-bottom: 5px; /* 下边距 */
        }

        /* 表单样式 */
        form#fileUploadForm {
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
        }

        form#fileUploadForm input[type="file"] {
            display: block;
            margin-bottom: 10px;
        }

        form#fileUploadForm input[type="button"] {
            display: block;
            width: 100%;
            padding: 10px;
            font-size: 20px; /* 注意这里我们使用了20px而不是30px，以保持一致性 */
            background-color: #4CAF50; /* 绿色背景 */
            color: white; /* 白色文字 */
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* 结果容器样式 */
        #result-container {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 4px;
        }

        /* 假设的列表项样式（Key C 和 Key E 列表） */
        #result-container ul li {
            list-style-type: none;
            margin-bottom: 5px;
        }

        /* 内部文件信息容器的样式（如果需要的话） */
        #interFileInfoContainer {
            /* 这里可以添加你需要的样式 */
        }

        /* 你可以根据需要添加更多的样式 */
    </style>
</head>
<body>

<h3>单文件上传</h3>
<form id="fileUploadForm" enctype="multipart/form-data">
    <div   class="file-input-wrapper" >
        <input type="file" id="singleFile" name="singleFile" style="font-size: 20px"><br>
    </div>
    <input type="button" id="singleFileUploadButton1" value="上传" style="font-size: 30px">
</form>

<div id="result-container">
</div>


<script>
    function uploadFile() {
        var formData = new FormData($('#fileUploadForm')[0]);
        $.ajax({
            url: 'http://localhost:8080/file/uploadFile', // 假设这是你的API端点
            type: 'POST',
            data: formData,
            contentType: false, // 必须false才会自动加上正确的Content-Type
            processData: false, // 必须false才会避开jQuery对formdata的默认处理
            dataType: 'json', // 告诉jQuery你期望返回JSON数据

            success: function(data) { // 当请求成功时调用
                displayResult(data);
            },
            error: function(xhr, status, error) {
                // 处理错误情况
                console.error("Error: " + error);
                $('#result-container').text('上传失败: ' + error);
            }
        });
    }

    // 一个函数来在页面上显示ResultVO的内容
    function displayResult(resultVO) {

        var container = $('#result-container'); // 获取显示结果的容器
        container.empty(); // 清空容器内容
        // 假设你有一个模板字符串来展示ResultVO的内容
        var templateBase = `
        <h4><strong>上传文档信息:</strong></h4>
        <table style="border-spacing: 20px; border-collapse: separate;">
            <tr>
                <td>
                    <p><strong>文件名:</strong> ${resultVO.fileName}</p>
                    <p><strong>中文关键词:</strong> ${resultVO.keyC.join(', ')}</p> <!-- 这里使用join方法将数组转换为逗号分隔的字符串 -->
                </td>
                <td>
                    <p><strong>文件路径:</strong> ${resultVO.filePath}</p>
                    <p><strong>英文关键词:</strong> ${resultVO.keyE.join(', ')}</p> <!-- 同理，Key E也使用join方法 -->
                </td>
            </tr>
        </table>
        <hr style="border-top: 1px dashed #000;"> <!-- 虚线水平线 -->
        <h4><strong>相似文档信息:</strong></h4>
        <div id="interFileInfoContainer"></div>
    `;

        // 将基础模板插入到容器中
        container.append(templateBase);
        function displayList2(listId, listData, separator = '<li>') {
            // 获取列表元素
            var $listContainer = $(listId);

            // 清空旧列表项
            $listContainer.empty();

            // 添加新的列表项
            listData.forEach(function(item) {
                // 如果您想在同一行显示项，并且使用空格分隔，则可以使用<span>而不是<li>
                // 但请注意，这将不再是一个无序列表（<ul>），而是一个包含<span>的容器
                if (separator === ' ') {
                    // 使用<span>并将它们放在<div>中，以保持在同一行
                    $listContainer.append(`<span>${item} </span>`);
                } else {
                    // 默认使用<li>元素
                    $listContainer.append(`<li>${item}</li>`);
                }
            });
        }


        // 显示内部文件信息
        var interFileInfoContainer = $('#interFileInfoContainer');
        if (resultVO.interFileInfo && Array.isArray(resultVO.interFileInfo)) {
            resultVO.interFileInfo.forEach(function(fileKeysVO) {
                displayFileKeysVO(fileKeysVO, interFileInfoContainer);
            });
        }


        // 递归函数来显示FileKeysVO的内容
        function displayFileKeysVO(fileKeysVO, container) {
            container.append(createFileKeysTable(fileKeysVO)); // 替换yourFil
            // container.append(fileKeysVOContainer);
        }

        function createFileKeysTable(fileKeysVO) {
            var tableTemplate = `
        <table  style="border-spacing: 20px; border-collapse: separate;" >
            <tr>
                <td>
                    <p><strong>内部文件路径:</strong> ${fileKeysVO.filePath}</p>
                    <p><strong>中文关键词:</strong> ${fileKeysVO.keyC.join(', ')}</p>
                    <p  style="color: red;" ><strong>相同的中文关键词:</strong> ${fileKeysVO.interKeyC.join(', ')}</p>
                    <p  style="color: red;" ><strong>中文关键词重叠数:</strong> ${fileKeysVO.interCNum}</p>
                </td>
                <td>
                    <p><strong>文件名: </strong>${fileKeysVO.fileName}</p>
                    <p><strong>英文关键词:</strong> ${fileKeysVO.keyE.join(', ')}</p>
                    <p style="color: red;" ><strong>相同的英文关键词:</strong> ${fileKeysVO.interKeyE.join(', ')}</p>
                    <p style="color: red;" ><strong>英文关键词重叠数:</strong> ${fileKeysVO.interENum}</p>
                </td>
            </tr>

        </table>
        <hr style="border-top: 1px dashed #000;"> <!-- 虚线水平线 -->

    `;

            return tableTemplate;
        }


        // 辅助函数来显示列表
        function displayList(listId, listData, $listContainer) {
            if (!$listContainer) {
                $listContainer = $('#' + listId);
            }
            if (listData && Array.isArray(listData)) {
                listData.forEach(function(item) {
                    $listContainer.append($('<li>').text(item));
                });
            }
        }

    }

    // 例如，在某个事件（如按钮点击）uploadFile
    $(document).ready(function() {
        // 给上传按钮绑定点击事件
        $('#singleFileUploadButton1').on('click', function() {
            uploadFile();
        });
    });
</script>

</body>
</html>